<template>
  <el-container class="container1">
    <el-aside class="com-aside" width="auto">
      <com-aside ></com-aside>
    </el-aside>
    <el-container class="container2">
      <el-header class="com-header" >
        <com-header ></com-header>
      </el-header>
      <el-main class="com-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import ComHeader from "../../components/comHeader.vue";
import ComAside from "../../components/comAside.vue";
import CommonFooter from "@/components/Footer.vue"
export default {
  name: "mainIndex",
  components: {
    ComHeader,
    ComAside,
    CommonFooter
  },
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
.container1 {
  height: 100%;
  width: 100%;
  display: flex;
}
.com-header {
  padding: 0;
  height: 50px;
}
.com-main {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
</style>